<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function () {
            var oBox = document.getElementById('box');
            var spans = oBox.children;
            getTime();
            var timer = setInterval(getTime,1000);
            function getTime(){
                var further = new Date('2016-07-14 00:00:00');
                var furtherSecond = further.getTime();
                var now = new Date();
                var nowSecond = now.getTime();
                var disTime = furtherSecond - nowSecond;
                var day = parseInt(disTime / (1000 * 60 * 60 * 24));
                disTime = disTime - day * 1000 * 60 * 60 * 24;
                var hour = parseInt(disTime / (1000 * 60 * 60));
                disTime = disTime - hour * 1000 * 60 * 60;
                var minute = parseInt(disTime / (1000 * 60));
                disTime = disTime - minute * 1000 * 60;
                var seconds = parseInt(disTime / 1000);

                spans[0].innerHTML = addZero(day);
                spans[1].innerHTML = addZero(hour);
                spans[2].innerHTML = addZero(minute);
                spans[3].innerHTML = addZero(seconds);
            }
            function addZero(num){
                return num<=9 ? '0'+num : num;
            }

        }
    </script>
    <style>
        #box{
            width:600px;
            height:60px;
            line-height: 60px;
            text-align: center;
            background: black;
            color:white;
            font:bold 50px/60px "微软雅黑";
            margin:50px auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <span id="day"></span>天
        <span id="hour"></span>小时
        <span id="minute"></span>分钟
        <span id="second"></span>秒
    </div>
</body>
</html>